第 6 节内置函数大纲

(一) 构造函数和创建对象

两种函数
创建对象的两种方式

1.两种函数

普通函数: 用来实现某个功能
构造函数: 用来创建对象

// 普通函数:实现两个数相加
function add(a,b) {
    var sum = a+b;
    return sum;
}

// 构造函数: 用来创建对象
function MadeCat(name,age) {
    this.name = name;
    this.age = age;
}
var cat1 = new MadeCat('小花',2);
var cat2 = new MadeCat('小白',3);
console.log('cat1',cat1);
console.log('cat2',cat2);

2.创建对象的两种方式

// 字面量方式
var obj = {
    name: 'zs',
    age: 100
}
var arr = [1,2,3];

// 构造函数new的方式(上面的例子)
function MadeCat() {}
var cat = new MadeDat();

(三) 日期对象常用方法和插件

创建日期对象
日期常用方法
日期函数应用
日期函数库 moment.js

1. 创建日期的2种方式

<script>
    // 创建日期对象方式1
    var today = new Date(); // 现在
    console.log(today);

    // 创建指定日期的对象2
    var bachelorDay = new Date('2018-11-11 11:11:11');
    console.log('去年光棍日', bachelorDay);

    // 创建日期方式3(毫秒数)
    var time = new Date(1548823140 * 1000);
    console.log('time', time); 
</script>

2. 日期常用方法

new Date()
getFullYear()
getMonth() + 1
getDate()
getHours()
getMinutes()
getSeconds()
getTime()
Date.now()

3. 日期函数应用

格式化日期
比较日期

<script>
    // 年月日时分秒 
    function addZero(num) {
        if (num < 10) {
            return '0' + num;
        } else {
            return num;
        }
    }

    function getTime() {
        var today = new Date();
        var Y = today.getFullYear();
        var M = today.getMonth() + 1;
        var D = today.getDate();
        var h = today.getHours();
        var m = today.getMinutes();
        var s = today.getSeconds();
        // var dayStr = `${Y}-${M}-${D} ${h}:${m}:${s}`;
        var dayStr = `${Y}-${addZero(M)}-${addZero(D)} ${addZero(h)}:${addZero(m)}:${addZero(s)}`;
        console.log(dayStr);
    }
    getTime(); 
</script>


<script>
// 比较日期


</script>

3. 日期函数库

<!DOCTYPE html>
<html lang="en"> 
<head> 
    <script src="http://momentjs.cn/downloads/moment.js"></script>
</head>

<body> 
    <script>
        var time1 = moment().format('YYYY-MM-DD HH:mm:ss')
        document.write('现在时间: ',time1); 
        var time2 = moment().add(7, 'days').format('YYYY-MM-DD HH:mm:ss');
        document.write('<br/>')
        document.write('七天后&nbsp;&nbsp;&nbsp;: ',time2); 
    </script>
</body> 
</html>

4. 日期函数库

名称： date-fns 使用教程： https://blog.csdn.net/yangyang3401/article/details/109175763 https://blog.csdn.net/Kiruthika/article/details/124442634

(四) Math 对象

常用方法

Math.round(x) // 四舍五入
Math.abs(x) // 求 x 的绝对值
Math.floor(x) // 向下取整
Math.ceil(x) // 向上取整
Math.random() // 随机数
其它:正弦、余弦、平方根...

相关方法

toFixed(x) 保留x位小数
parseInt 把小数变整数

应用获取某个范围内的随机数

<script>
    // 1.Math.round(x) // 四舍五入  
    var num1 = Math.round(4.4);
    console.log('num1=', num1);
    var num1 = Math.round(4.5);
    console.log('num1=', num1);

    // 2.Math.abs(x) // 求 x 的绝对值
    var num2 = Math.abs(-5);
    console.log('num2=', num2);

    // 3.Math.floor(x) // 向下取整
    var num3 = Math.floor(3.3);
    console.log('num3=', num3);
    var num3 = Math.floor(3.8);
    console.log('num3=', num3);

    // 4.Math.ceil(x) // 向上取整
    var num4 = Math.ceil(4.4);
    console.log('num4=', num4);
    var num4 = Math.ceil(4.8);
    console.log('num4=', num4);

    // 5.Math.random() // 随机数,从0到1(不包含);
    var num5 = Math.random();
    console.log(num5);

    // 6.Math.sqrt(x) // 求 x 的平方根
    var num6 = Math.sqrt(1.44);
    console.log('num6', num6);

    // 相关方法

    // 1.toFixed(x) 保留x位小数
    var num7 = 3.234234825;
    var newNum7 = num7.toFixed(2);
    console.log('newNum7', newNum7);
    // 2. parseInt 把小数变整数
    var num8 = parseInt(23.23234);
    console.log('num8', num8);

    // 应用

    // 获取某个范围内的随机数, 比如5-10之间的随机数
    var num9 = Math.random() * (10 - 5) + 5;
    console.log('num9', num9);

    // 封装函数
    function getRandom(min, max) {
        var num9 = Math.random() * (max - min) + min;
        num9 = Math.floor(num9);
        console.log('num9', num9);
    }
</script>

(五) 字符串常用方法

【金山文档】字符串方法 https://kdocs.cn/l/sh7WxQWpyMX2

length // 字符串的长度
trim() // 去掉字符串前后的空格
split() // 字符串转数组,接收一个参数,作为转换的标志
substring() // 截取字符串,接收两个参数,开始的位置和结束的位置
slice() // 截取字符串, 用法类似substring, 但可以复数
substr() // 截取字符串, 接收两个参数,第一个参数是开始位置, 第二个参数是截取的字符个数
charAt() // 下标对应的字符, 若没有返回空
indexOf() // 返回检测字符串的位置
lastIndexOf() // 同上,但从后面开始检查
includes() // 检查字符串是否包含指定字符
match() // 检查有没有包含某个值, 返回符合一个数组,存放符合条件的字符
replace() // 替换
toLowerCase() // 转小写字母
toUpperCase() // 转大写字母

(六) 常用的数组方法

【金山文档】《数组常用方法》 https://kdocs.cn/l/cdAwv1hETvhJ

0. 思维导图

join() 把数组的所有元素放入一个字符串。
reverse() 反转数组的元素顺序。
添加设删除数组成员
1. pop() 删除数组的最后一个元素并返回删除的元素。
2. push() 向数组的末尾添加一个或更多元素，并返回新的长度。
3. shift() 删除并返回数组的第一个元素。
4. unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
数组检测
1. isArray() 判断对象是否为数组。
2. includes() 判断一个数组是否包含一个指定的值。 // 成员只能是基本数据类型
3. every();
4. some() 检测数组元素中是否有元素符合指定条件。 // 用来判断数组是否包含符合条件的成员, 包含返回 true, 不包含返回 false
5. find() 返回符合传入测试（函数）条件的数组元素。 // 只返回符合条件的第一个成员, 没有符合条件就返回 undefined
6. findIndex() 返回符合传入测试（函数）条件的数组元素索引。
7. indexOf() 搜索数组中的元素，并返回它所在的位置。
8. lastIndexOf() 搜索数组中的元素，并返回它最后出现的位置。
map()。对原来成员改头换面
filter() 检测数值元素，并返回符合条件所有元素的数组。
forEach() 遍历数组。
slice() 选取数组的一部分，并返回一个新数组。
splice() 从数组中添加或删除元素。
sort() 对数组的元素进行排序。

1. join()

把数组的所有元素放入一个字符串。

2. reverse()

反转数组的元素顺序。

3. 添加设删除数组成员

pop() 删除数组的最后一个元素并返回删除的元素。
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
shift() 删除并返回数组的第一个元素。
unshift() 向数组的开头添加一个或更多元素，并返回新的长度。

4. 数组检测

isArray() 判断对象是否为数组。
includes() 判断一个数组是否包含一个指定的值。 // 成员只能是基本数据类型
every();
some() 检测数组元素中是否有元素符合指定条件。 // 用来判断数组是否包含符合条件的成员, 包含返回 true, 不包含返回 false
find() 返回符合传入测试（函数）条件的数组元素。 // 只返回符合条件的第一个成员, 没有符合条件就返回 undefined
findIndex() 返回符合传入测试（函数）条件的数组元素索引。
indexOf() 搜索数组中的元素，并返回它所在的位置。
lastIndexOf() 搜索数组中的元素，并返回它最后出现的位置。

5. map()

对原来成员改头换面

6. filter()

检测数值元素，并返回符合条件所有元素的数组。

7. forEach()

遍历数组。

8. slice()

选取数组的一部分，并返回一个新数组。

9. splice()

从数组中添加或删除元素。

10. sort()

对数组的元素进行排序。

11. reduce()

数组累加器

// 字符串数组排序
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort(); // 升序
fruits.reverse(); // 降序

// 数字数组排序

// 对象排序
var arr = [
	{
		name: 'zhangsan',
		age: 18
	},
	{
		name: 'lisi',
		age: 15
	},
	{
		name: 'wangwu',
		age: 23
	},
	{
		name: 'chenliu',
		age: 18
	},
	{
		name: 'linqi',
		age: 30
	}
]

arr.sort(function(a,b) {
	if( a.name > b.name) {
		return 1;
	} else if (a.name < b.name) {
		return -1;
	} else {
		return 0;
	}
})
console.log(arr);

(七) 练习和作业

练习:

封装一个函数, 每运行一次就返回一个某个范围内的随机数(比如5-20);
在页面上绑定一个点击事件,用来每天打卡, 用户点击打卡按钮, 若点击时间是每天的8:55(不包含)-9:00(包含), 弹出迟到, 若点击时间是9:00(不包含)之后, 弹出严重迟到
将字符串 "13800000000" 变成"138****0000"
用户输入手机号码后,点击获取验证码, 弹出"验证码已发送到尾号为xxxx(4位)的手机上, 请注意查收"
另:
- 把用户输入的内容前后去空格
- 检查用户输入的是否是11位的数字
```
<!DOCTYPE html>
<html lang="en">
<head> 
	<title>Document</title>
</head>
<body>
	<input placeholder="请输入手机号码"/> <button>获取验证码</button>
</body>
</html>
```

编写一个Javascipt函数parseQueryString，它的用途是把URL参数解析成为一个对象

function parseQueryString(url){
    // 编写代码实现
}
var url = 'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MjM5Njk2NTE5Mg&scene=124';
var obj = parseQueryString(url); 
alert(obj.action);

(八) 数组作业

1. web115班有56个学生, 补充代码, 把学生信息渲染到页面上, 添加随机选择学生功能, 选中的学生高亮(能做就做)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      background-color: #f4f4f4;
    }

    .btn-box {
      text-align: center;
    }

    .box {
      padding: 20px;
      display: flex;
      background-color: #fff;
      width: 600px;
      margin: 0 auto;
      flex-wrap: wrap;
      align-content: flex-start;
      justify-content: space-around;
      min-height: 500px;
    }

    .item {
      border: 1px solid #999;
      width: 120px;
      margin: 5px;
      text-align: center;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
</head>

<body>
  <div class="btn-box"> <button onclick="madeData()">生成数据</button> <button>随机选择</button></div>
  <div class="box">
    <span class="item">1.邱用(男)</span>
    <span class="item">2.邱用(男)</span>
    <span class="item">3.邱用(男)</span>
    <span class="item">4.邱用(男)</span>
    <span class="item">5.邱用(男)</span>
    <span class="item">6.邱用(男)</span>
    <span class="item">7.邱用(男)</span>
    <span class="item">8.邱用(男)</span>
  </div>

  <script>
     var list = [];
    function madeData() {
      for (var i = 1; i <= 56; i++) {
        let obj = {
          name: Mock.Random.cname(),
          sex: Mock.mock(/[男女]/),
          no: i
        }
        list.push(obj);
      }
      // 补充代码, 渲染列表
    }


  </script>
</body>
</html>

2. 计算购物车总价

有如下两个数组, goodsList[] 是商品列表数组, idList[] 是被选中的商品的id组成的数组, 请计算被选中商品的总价

// 商品数组列表
var goodsList = [ { productId: "94217104", buyNum: 1, masterName: "【山西】红富士苹果 8-10枚5斤装（果径80mm/枚）", slaveName: "生态基地种植 饱满圆润脆甜 皮薄肉厚多汁", userId: "60d6f0b08f119d3e25af8cef", price: "3480", cartId: "61c285c90ab3e6758a54904f", }, { productId: "104356809", buyNum: 1, masterName: "【云南】冰糖心丑苹果", slaveName: "原产基地直供 脆甜多汁爽口 自然糖心结晶", userId: "60d6f0b08f119d3e25af8cef", price: "3990", cartId: "61c2edee0ab3e6758a549055", }, { productId: "31129853", buyNum: 3, masterName: "四川安岳黄柠檬 3斤装（单果90-110g）", slaveName: "采自“中国柠檬之都” 个头圆润均匀 地道酸爽十足", userId: "60d6f0b08f119d3e25af8cef", price: "2390", cartId: "61c9bfd76a92be12aba9afd1", }, { productId: "97305541", buyNum: 2, masterName: "【四川】新鲜青柠檬 3斤（单果90-110g）", slaveName: "果园现摘现发 清新酸爽怡人 个头圆润饱满", userId: "60d6f0b08f119d3e25af8cef", price: "1990", cartId: "61c9bfde6a92be12aba9afd2", }, { productId: "88651149", buyNum: 2, masterName: "【福建】黄金百香果 大果 （单果70-100g）", slaveName: "醇香自然圆润 酸甜多汁可口 富含多种维生素", userId: "60d6f0b08f119d3e25af8cef", price: "5350", cartId: "61c9bfe76a92be12aba9afd3", }, ];
// 被选中的商品id数组
var idList = ["61c9bfe76a92be12aba9afd3", "61c9bfde6a92be12aba9afd2", "61c9bfd76a92be12aba9afd1"];

3. 写一个diff方法, 用于比较两个数组, 返回数组中不同的部分

比较两个数组,然后返回一个新数组,该数组的元素为两个给定数组中所有独有的数组元素。换言之, 返回两个数组的差异。

var list1 = [1, 3, 8, 4, 7];
var list2 = [1, 2, 8, 3, 4];
function diff(arr1, arr2) { 
  // todo
} 

let list = diff(list1,list2);
console.log(list);

4. 数组排序

写一个function, 实现对一个对象数组按任意属性排序, 如对以下数组分别按id和name排序

var list = [
  { id: 0, name: "java" },
  { id: 8, name: "go" },
  { id: 5, name: "python" },
  { id: 10, name: "javascript" },
];

5. 数组去重

对以下数组执行去重操作

var list = [1,2,3,4,5,6,5,3,2,4,56,4,1,2,1,1,1,1,1,1,56,45,56];

6. 出现次数最多的字符

写一个function, 实现查找一个字符串中出现次数最多的字符

var str = 'asdfjlkjgajsfgasdfhaskdfhsakdhfjgsdfasdjf';
function getTheMore(str) {
    // todo
}

7. 查找用户

var users = [
    {
        name: '张三',
        sex:1, // 男
        age: 18,
        skill:[
            "song", // 唱歌
            "speak", // 说话
            "eat" // 吃饭
        ]
    },
    {
        name: '李四',
        sex:0,  // 女 
        age: 23,
        skill:[
            "play", // 玩 
            "speak", 
            "eat" 
        ]
    },
    {
        name: '王五',
        sex: 1, 
        age: 34,
        skill:[
            "song", 
            "sleep", // 睡觉 
            "eat" 
        ]
    },
    {
        name: '赵六',
        sex: 0, 
        age: 19,
        skill:[
            "song", 
            "sleep", 
            "dance"  // 跳舞
        ]
    },
]

function findUser(users) {
    // todo 请在此处补齐代码, 筛选出同时具有"speak"和"song"技能的用户, 并将他们的名字, 性别, 年龄和技能用中文在控制台打印出来
    // todo e.g. "张三,男,18岁, 会唱歌,说话,吃饭.", 多行数据换行
}

第05节函数和作用域

第06节基本和引用数据类

第 6 节 内置函数大纲 #

(一) 构造函数和创建对象 #

1.两种函数 #

2.创建对象的两种方式 #

(三) 日期对象常用方法和插件 #

1. 创建日期的2种方式 #

2. 日期常用方法 #

3. 日期函数应用 #

3. 日期函数库 #

4. 日期函数库 #

(四) Math 对象 #

(五) 字符串常用方法 #

(六) 常用的数组方法 #

0. 思维导图 #

1. join() #

2. reverse() #

3. 添加设删除数组成员 #

4. 数组检测 #

5. map() #

6. filter() #

7. forEach() #

8. slice() #

9. splice() #

10. sort() #

11. reduce() #

(七) 练习和作业 #

(八) 数组作业 #

1. web115班有56个学生, 补充代码, 把学生信息渲染到页面上, 添加随机选择学生功能, 选中的学生高亮(能做就做) #

2. 计算购物车总价 #

3. 写一个diff方法, 用于比较两个数组, 返回数组中不同的部分 #

4. 数组排序 #

5. 数组去重 #

6. 出现次数最多的字符 #

7. 查找用户 #